<template>
  <!--模态窗 多行-->
  <transition
    name="custom-classes-transition"
    enter-active-class="animated fadeInDown"
    leave-active-class="animated fadeOutUp"
  >
    <div class="modal-ctrl-body" v-show="addModalObj.isShow">
      <div class="modal-ctrl-main even-row-ctrl">

        <div class="modal-title">
          <p>新增警车信息</p>
        </div>

        <div class="modal-ctrl-content">
          <div class="even-row">

            <div class="modal-row" >
              <div class="modal-form-key f-l indispensable">
                车牌号：
              </div>
              <input type="text" maxlength="16" placeholder="最长16个字符" v-model="AddModalData.CARCODE" class="modal-text f-l">
            </div>

            <div class="modal-row" >
              <div class="modal-form-key f-l indispensable">
                部门：
              </div>
              <input type="text" v-model="stationName" @click="getStationTree" readonly="readonly" class="modal-text f-l" >
              <input type="hidden" v-model="AddModalData.STATIONID">
              <div class="sectionTree" v-show="sectionTreeIShow">
                <div id="sectionTree" class="ztree sectionTree-box"></div>
              </div>
            </div>

            <div class="modal-row">
              <div class="modal-form-key f-l indispensable">
                车辆类型：
              </div>
              <select @change="selectCarType" :value="AddModalData.CARTYPE">
                <option value="-1">请选择车辆类型</option>
                <option v-for="typeList in carTypeList" :value="typeList.ID">
                  {{typeList.TYPE}}
                </option>
              </select>
            </div>

            <div class="modal-row">
              <div class="modal-form-key f-l">
                是否在线：
              </div>
              <select @change="selectIsOnline" :value="AddModalData.ISONLINE">
                <option value="1">在线</option>
                <option value="2">离线</option>
              </select>
            </div>

            <div class="modal-row">
              <div class="modal-form-key f-l">
                经度：
              </div>
              <input type="text"
                     maxlength="12"
                     v-model="AddModalData.LONGITUDE"
                     class="modal-text f-l">
            </div>

            <div class="modal-row" >
              <div class="modal-form-key f-l">
                纬度：
              </div>
              <input type="text" maxlength="11" v-model="AddModalData.LATITUDE" class="modal-text f-l">
            </div>

            <div class="modal-row" >
              <div class="modal-form-key f-l">
                通用属性：
              </div>
              <input type="text" maxlength="16" placeholder="最长16个字符" v-model="AddModalData.COMMATTRIBUTE" class="modal-text f-l">
            </div>

          </div>

        </div>
        <div class="btns text-r">
          <button type="button" class="btn btn-default"  @click="close">取消</button>
          <button type="button" class="btn btn-info" @click="subBtn">确定</button>
        </div>
        <!--{{userDetailsModal.obj}}-->
      </div>
    </div>
  </transition>
</template>

<script>
    export default {
        name: "AddVehicle",
        props:['addModalObj'],
        data(){
          return{
            AddModalData:{
              CARCODE:'', //车排
              STATIONID:'', //所属单位id
              CARTYPE:'-1', //车辆类型
              ISONLINE:'1', //是否在线
              LONGITUDE:'', //经度
              LATITUDE:'', //纬度
              COMMATTRIBUTE:'' //通用属性
            },
            carTypeList:[],
            stationName:'',
            setting : {
              data: {
                simpleData: {
                  enable: true
                },
              }
            },
            sectionTreeIShow:false
          }
        },
        watch:{
          addModalObj:{
            handler(v1){
              if( v1.isShow ){
                this.getCarTypeAjax();
              }
            },
            deep:true
          }
        },
        mounted(){
          let _this = this;
          this.setting.callback = {
            onClick:function(event,treeId,treeNode){ //新增警员部门树选择
              //console.log(treeNode);
              _this.AddModalData.STATIONID = treeNode.id;
              _this.stationName = treeNode.name;
              _this.sectionTreeIShow = !_this.sectionTreeIShow;
            }
          };
        },
        methods:{
          //提交
          subBtn(){
            //console.log(this.AddModalData);
            let searchParams = {
                "columns":["*"],
                "conditions":[
                  {"field": "CARCODE","symbol":"=","value":this.AddModalData.CARCODE}
                ],
                "dataTypeCode":"policefacility",
                "pageIndex":1,
                "pageSize":20,
                "tableName":"T_RES_CAR_INFO"
            };
            //判断是否唯一
            this.$axios.post(this.HOST+"/base/query/page",searchParams)
              .then((data)=>{
                //console.log(data.data.data.list);
                if( data.data.data.list.length > 0 ){
                  this.s_alert("已存在该车牌号！");
                }else{
                  if( this.verifyForm.isNull(this.AddModalData.CARCODE) ){
                    this.s_alert("车牌号不能为空！");
                    // alert("车牌号不能为空！");
                    return false;
                  }else if( this.verifyForm.isNull(this.AddModalData.STATIONID) ){
                    this.s_alert("所属单位不能为空！");
                    // alert("所属单位不能为空！");
                    return false;
                  }else if( this.verifyForm.isNull(this.AddModalData.CARTYPE) ){
                    this.s_alert("车辆类型不能为空！");
                    // alert("车辆类型不能为空！");
                    return false;
                  }else if(  this.verifyForm.ifLongitude(this.AddModalData.LONGITUDE) ){
                    this.s_alert("经度格式不正确或区间范围不在正负180以内，并且小数点后最长只能有8位数！");
                    // alert("经度格式不正确或区间范围不在正负180以内，并且小数点后最长只能有18位数！");
                    return false;
                  }else if( this.verifyForm.ifLatitude(this.AddModalData.LATITUDE) ){
                    this.s_alert("纬度格式不正确或区间范围不在正负90以内，并且小数点后最长只能有8位数！");
                    // alert("纬度格式不正确或区间范围不在正负90以内，并且小数点后最长只能有18位数！");
                    return false;
                  }

                  let paramsKey = [];
                  let paramsValue = [];

                  for( let key in this.AddModalData ){
                    paramsKey.push(key);
                    paramsValue.push(this.AddModalData[key]);
                  }

                  let params = {
                    "columns": paramsKey,
                    "dataTypeCode": "policefacility",
                    "datas": paramsValue,
                    "tableName": "T_RES_CAR_INFO"
                  };
                  //console.log(params);
                  this.$axios.post(this.HOST+"/base/save",params)
                    .then((data)=>{
                      //console.log(data);
                      if( data.data.success ){
                        this.s_alert("新增成功！");
                        // alert("新增成功！");
                        this.s_logwrite("资源信息管理-警车管理","新增警车");
                        this.close()
                      }else{
                        this.s_alert("新增失败！")
                        // alert("新增失败！")
                      }
                    })
                    .catch((err)=>{
                      //console.log(err);
                    })
                }
                ////console.log(this.tableRow);
              })
              .catch((err)=>{
                //console.log(err);
              })
          },
          //是否在线
          selectIsOnline(ele){
            ////console.log(ele.target.value);
            this.AddModalData.ISONLINE = ele.target.value;
          },
          selectCarType(ele){
            ////console.log(ele.target.value);
            this.AddModalData.CARTYPE = ele.target.value;
          },
          //加载类型列表
          getCarTypeAjax(){
            let params = {
              "columns": ["*"],
                "dataTypeCode": "policefacility", //数据库选择
                "pageIndex": 1, //分页
                "pageSize":-1, //分页条目 -1查所有
                "tableName": "T_CAR_TYPE" //表名称
            };
            //POST /base/query/page
            this.$axios.post(this.HOST+"/base/query/page",params)
              .then((data)=>{
                //console.log(data);
                this.carTypeList = data.data.data.list;
              })
              .catch((err)=>{
                //console.log(err);
              })
          },
          selectIsWork(ele){
            ////console.log(ele.target.value);
            this.AddModalData.IS_WORK = ele.target.value
          },
          //展开部门树
          getStationTree(){
            this.sectionTreeIShow = !this.sectionTreeIShow;
            if( this.sectionTreeIShow ){
              this.getStationTreeAjax()
            }
          },
          //加载部门树
          getStationTreeAjax(){
            this.$axios.get(this.HOST+'/station/getOrgaInfo')
              .then((data)=>{
                $.fn.zTree.init($("#sectionTree"), this.setting, data.data.data);
                //console.log(data);
              })
              .catch((err)=>{
                //console.log(err);
              })
          },
          //关闭弹窗
          close(){
            this.$emit("addModalClose");
            this.clearData(); //关闭弹窗清除数据
          },
          //清除数据
          clearData(){
            this.AddModalData={
              CARCODE:'', //车排
              STATIONID:'', //所属单位id
              CARTYPE:'-1', //车辆类型
              ISONLINE:'1', //是否在线
              LONGITUDE:'', //经度
              LATITUDE:'', //纬度
              COMMATTRIBUTE:'' //通用属性
            };
            this.stationName='';
            this.sectionTreeIShow = false;
          }
        }
    }
</script>

<style scoped>
  .sectionTree{
    position: absolute;
    top: 30px;
    right: 0;
    width: 60%;
    z-index: 2;
    background-color: #fff;
    border:1px solid rgba(51,51,51,0.2);
    box-sizing: border-box;
    padding: 5px;
    max-height: 200px;
    overflow-y: auto;
  }
  .fadeInDown,.fadeOutUp{
    animation-duration: .500s;
  }
</style>
